<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <title>User</title>
</head>
<body>



        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north'" style="height:69px">
                    <a href="#"  id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>
                    <a href="#" id="removesBtn"  class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
                    <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">
            </div>
            <div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px"  id="usersContainer">
           
                <table id="dg" data-options="method:'post'" >
                   
                </table>
            </div>
        </div>

        <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
            
                <form id="ff" method="post" action="http://10.31.160.59:3000/users/data">
                    <div style="margin-bottom:20px">
                           <input  class="easyui-textbox" name="_id"> 
                        <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                            <input  type="checkbox" name="gender" value="女">
                    </div>
                    
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px" id="add_submit">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px" id="cancel_submit">Clear</a>
                </div>
        </div>
    <script>
    $('#dg').datagrid({
        fit:true,
        border:false,
        pagination:true,
        pageSize:5,
        pageList: [5,10,15,20],
        method:'post',
        
        url:'http://10.31.160.59:3000/users/list',
        // checkbox:true,
        columns:[[
              {field:'_id',title:'',checkbox:true,width:10},
             {field:'name',title:'姓名',width:80,align:'center'},
             {field:'gender',title:'性别',width:100,align:'center'},
         
           {field:'operate',title:'操作',align:'center',width:$(this).width()*0.1,  
			    formatter:function(value, row, index){  
                    return  "<a onclick=deleteData('"+row._id+"') >删除</a>&nbsp;&nbsp;<a onclick=editData('"+row._id+"') >修改</a>";
                      
			}} 
        ]]
        
    });

    


    function submitForm(){
         var  postData=$('#ff').serializeJSON();
          if(postData._id){
                //edit
                $.ajax({
                    type:'put',
                    url:'http://10.31.160.59:3000/users/data/'+postData._id,
                    data:postData,
                    async:true
                }).done(function(data){
                    $('#dg').datagrid('reload');
                    $('#dlg').dialog('close') ;
                })
                
            }else{
               //add
            
                $.ajax({
                        type:'post',
                        url:'http://10.31.160.59:3000/users/data',
                        data:{
                            name:postData.name,
                            gender:postData.gender
                        },//重点
                        async:true
                }).done(function(data){

                  
                    $('#dg').datagrid('reload');
                    $('#dlg').dialog('close') ;
                })

            }
    
    }


    function clearForm(){
        $('#ff').form('clear');
    }
    


        //添加ssss用户
        
     $("#addBtn").on("click",function(){
              $('#ff').form('clear');
                var  postData=$('#ff').serializeJSON();
//              console.log(postData.id)
                $('#dlg').dialog('open') ;
               
            // }
     });

    //修改ss用户
   function editData(id){
         $.ajax({
            type:'get',
            url:'http://10.31.160.59:3000/users/data/' + id,
            //data:$('#ff').serialize(),
            async:true
        }).done(function(res){
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    // $('#ff').form('load', 'form_data1.json');
    // $('#dlg').dialog('open');
       
   }

    //删除一个用户
    function deleteData(id){
        $.messager.confirm('确认删除', '你确认删除吗？', function(r){
                if (r){
                     $.ajax({
                        type:'delete',
                        url:'http://10.31.160.59:3000/users/data/'+id,
                        async:true
                    }).done(function(res){
                       // $('#dg').datagrid('reload');
                       location.reload();

                    })
                }
            })

    
    }
    
    //删除多个用户
    $('#removesBtn').click(function(){
        var rows=$('#dg').datagrid('getSelections');
        
        console.log(rows);
        if(rows.length>0){
            var ids=[];
            rows.forEach(function(item,idx){
                ids.push(item._id)
            })
            $.ajax({
                type:'post',
                url:'http://10.31.160.59:3000/users/data/removes',
                data:{
                    ids:ids.toString()
                },
                async:true
            }).done(function(res){
                $('#dg').datagrid('reload');
            })
        }
    })
//搜索
    function doSearch(value){
            $('#dg').datagrid({
                queryParams:{
                    
                    name:value
                }
            }).datagrid('reload');
        }
</script>        
</body>
</html>